<template>
  <div>
    <div class="user-online">
      <p style="line-height: 30px; font-size: 20px;">
        用户统计
      </p>
      <div class="alluser">
        <p>当前在线</p>
        <p style="font-size: 25px;">
        {{this.datalist.userOnline}}</p>
      </div>
      <div style="height: 15px;"></div>
      <div class="alluser">
        <p>累计用户数量</p>
        <p style="font-size: 25px;">{{this.datalist.allUser}}</p>
      </div>
      <div style="height: 15px;"></div>
    </div>
    <div class="data-area">
      <p style="line-height: 30px; font-size: 20px;">
        活动统计
      </p>
      <div class="allmessage">
        <p>今日新增</p>
        <p style="font-size: 25px;">{{this.datalist.todayMessage}}</p>
      </div>
      <div style="height: 15px;"></div>
      <div class="allmessage">
        <p>昨日数量</p>
        <p style="font-size: 25px;">{{this.datalist.yesterdayMessage}}</p>
      </div>
      <div style="height: 15px;"></div>
      <div class="allmessage">
        <p>历史累计</p>
        <p style="font-size: 25px;">{{this.datalist.allMessage}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AdminHome',
  data() {
    return {
      datalist: {}
    }
  },
  methods: {
    getdatalist() {
      this.$axios
          .get('/static/mock/datalist.json')
          .then(res => {
            res = res.data
            if (res.ret && res.data) {
              this.datalist = res.data
            }else {
              alert('网络错误！稍后再试！')
            }
          })
    }
  },
  mounted() {
    this.getdatalist()
  }
}
</script>

<style scoped>
    .user-online {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .alluser {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #67C23A;
        border-radius: 15px;
        color: white;
        height: 120px;
        width: 100%;
        vertical-align: middle;
        line-height: 30px;
    }
    .data-area {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .allmessage {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #409EFF;
        border-radius: 15px;
        color: white;
        height: 120px;
        width: 100%;
        line-height: 30px;
    }
</style>